<template>
  <div class="step_02">
    <el-button @click="translate" size="mini" type="primary" plain
      >开启平移</el-button
    >
    <el-button @click="translateClose" size="mini" type="primary" plain
      >关闭平移</el-button
    >
    <el-button @click="enlarge" size="mini" type="primary" plain
      >放大画布</el-button
    >
    <el-button @click="narrow" size="mini" type="primary" plain
      >缩小画布</el-button
    >
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph } from "@antv/x6";
export default {
  name: "step_02",
  data() {
    return {
      graph: null,
      data: {
        nodes: [
          {
            id: "node1",
            x: 10,
            y: 10,
            width: 100,
            height: 50,
            label: "NIHAO ",
          },
          {
            id: "node2",
            x: 100,
            y: 150,
            width: 100,
            height: 50,
            label: "world",
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
          },
        ],
      },
    };
  },
  methods: {
    translate() {
      this.graph.enablePanning();
    },
    translateClose() {
      this.graph.disablePanning();
    },
    enlarge() {
      this.graph.zoom(0.3);
    },
    narrow() {
      this.graph.zoom(-0.3);
    },
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
    this.graph.centerContent();
  },
};
</script>
<style scoped lang='scss'>
</style>